<template>
	<el-dialog title="积分调整" :visible.sync="dialogVis" :close-on-click-modal="false" width="500px" center @close="handleCancel">
		<div class="inter-page">
			<div class="inter-box t-cen" v-if="integralData">
				<div class="pic">
					<img :src="integralData.profile"/>
				</div>
				<div class="desc marg-B1">
					<div class="fs-20 t-cen marg-B2">{{integralData.name}}</div>
					<div class="fs-12 t-cen marg-B1">
						<span class="t-eight">他的积分</span>
						<span class="t-three">{{integralData.money}}</span>
					</div>
					<div class="fs-14 flex f-be t-cen marg-B2">
						<el-select class="marg-R1" v-model="addType" placeholder="请选择">
							<el-option label="增加" value="1">
							</el-option>
							<el-option label="减少" value="2">
							</el-option>
						</el-select>
						<el-input type="text" v-model="money" placeholder="请输入积分"></el-input>
					</div>
				</div>
				<div class="fs-12 t-cen marg-B2 t-fa">
					*直接修改TA账户的最终金额
				</div>
				<div class="flex f-center marg-B2">
					<span>我的积分</span>
					<span style="color: #FF5733;">{{pointsTotal}}</span>
					<el-button @click="goAdd" type="primary" class="cz-btn">前往充值</el-button>
				</div>
				<el-button type="primary" @click="comfirmClick" class="save-btn">保存</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script>
	import { request } from "../assets/js/utils/request";
	export default {
		props: ['isIntergral','integralData','pointsTotal'],
		data() {
			return {
				money: '',
				dialogVis: false,
				detailInfo: {},
				addType: '1'
			}
		},
		methods: {
			goAdd() {
				this.$router.push('/rechargePage')
			},
			handleCancel() {
				this.dialogVis = false
				this.$emit('integralClose')
			},
			comfirmClick() {
				const formData = new FormData();
				formData.append('to_uid',this.integralData.uid);
				formData.append('money',this.money)
				if(this.addType == 1) {
					request({
						url: `/user/money/transfer`,
						method: 'POST',
						data: formData
					}).then(res => {
						if(res.code == 200) {
							this.handleCancel()
							this.$message({
								message: '成功',
								type: 'success'
							})
						} else{
							this.$message({
								message: res.message,
								type: 'error'
							});
						}
					})
				} else {
					request({
						url: `/user/money/take`,
						method: 'POST',
						data: formData
					}).then(res => {
						if(res.code == 200) {
							this.handleCancel()
							this.$message({
								message: '成功',
								type: 'success'
							})
						} else{
							this.$message({
								message: res.message,
								type: 'error'
							});
						}
					})
				}
			}
		},
		watch: {
			isIntergral(newVal) {
				this.dialogVis = newVal
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.el-dialog{
        border-radius: 15px;
    }
	.inter-page{
		.inter-box{
			border-radius: 4px;
			padding: 20px 10px;
			background: #fff;
			.pic{
				width: 80px;
				height: 80px;
				margin: 0 auto;
				border-radius: 50%;
				img{
					width: 80px;
					height: 80px;
					border-radius: 50%;
				}
			}
			.desc{
				margin: 0 auto;
				.icon{
					width: 26rpx;
				}
				.t{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.el-select {
					width: 150px;
					.el-input{
						width: 150px;
						.el-input__inner{
							height: 32px;
						}
					}
				}
				
			}
			.cz-btn{
				padding: 0;
				margin-left: 5px;
				font-size: 12px;
				color: rgba(255, 255, 255, 1);
				width: 73px;
				height: 20px;
				line-height: 20px;
				border: none;
				border-radius: 20px;
				background: rgba(255, 87, 51, 1);
			}
			.save-btn{
				font-size: 16px;
				color: rgba(255, 255, 255, 1);
				width: 189px;
				height: 40px;
				border: none;
				border-radius: 50px;
				background: rgba(41, 103, 227, 1);
			}
		}
	}
</style>